<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <title>KISSY MenuButton</title>
    <link href="/kissy/src/css/assets/dpl/base.css" rel="stylesheet"/>
    <link href="demo/test.css" rel="stylesheet" id="link1"/>
    <style>
        li {
            padding: 5px;
            border: 1px solid white;
        }

        h1 {
            font-size: 2em;
            margin: 10px;
            text-align: center;
        }

        h2 {
            font-size: 1.5em;
            margin: 10px;
            text-align: center;
        }

        #wrap {
            width: 90%;
            margin: 0 auto;
        }
    </style>
    <style id="style1">
        .test2 {
            color: green;
        }
    </style>

    <style id="style3">
        .test3 {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin: 10px;
        }
    </style>
</head>
<body>
<div id="wrap">
    <h1 id="describe">StyleSheet 演示</h1>

    <p class="test1"> test1 original red </p>

    <br>

    <p class="test2"> test2 original green </p>

    <div class="test3">test3 width</div>

    <div class="test3">test3 width 2</div>

    <button id="c1"> turn red to green</button>
    <button id="c2"> turn green to red</button>
    <button id="c3">enlarge test1</button>
    <button id="c4">enlarge test2</button>
    <button id="c5">see link cssText</button>
    <button id="c6">see style cssText</button>
    <button id="c7">restore large in test1</button>
    <button id="c8">remove class test1</button>

    <button id="c9">add class test3 in link1</button>

    <button id="c10">disable link1</button>

    <button id="c11">enlarge test3</button>
</div>
<script src="/kissy/build/seed.js"></script>
<script src="/kissy/src/package.js"></script>
<script>
    var styleSheet1, styleSheet2;
    KISSY.use("stylesheet,core", function (S, StyleSheet) {
        var $ = S.all;

        styleSheet1 = new StyleSheet(S.get("#link1"));
        styleSheet2 = new StyleSheet(S.get("#style1"));

        styleSheet3 = new StyleSheet(S.get("#style3"));

        $("#c1").on("click", function () {
            styleSheet1.set('.test1', {
                color: 'green'
            });
        });

        $("#c2").on("click", function () {
            styleSheet2.set('.test2', {
                color: 'red'
            });
        });

        $("#c3").on("click", function () {
            styleSheet1.set('.test1', {
                "fontSize": '20px'
            });
        });

        $("#c4").on("click", function () {
            styleSheet2.set('.test2', {
                "font-size": '20px'
            });
        });

        $("#c5").on("click", function () {
            S.log(styleSheet1.get());
        });

        $("#c6").on("click", function () {
            S.log(styleSheet2.get());
        });

        $("#c7").on("click", function () {
            styleSheet1.set(".test1", {
                fontSize: ""
            });
        });

        $("#c8").on("click", function () {
            styleSheet1.set(".test1", {
                fontSize: "",
                color: ""
            });
        });

        $("#c9").on("click", function () {
            styleSheet1.set(".test3", {
                fontSize: "20px",
                color: "green"
            });
        });

        $("#c10").on("click", function () {
            styleSheet1.disable();
        });

        $("#c11").on("click", function () {
            styleSheet3.set('.test3', {
                width: '200px'
            });
        });
    });
</script>
</body>
</html>